<template>
  <div class="page-container">
    <div>
      <ex_header_spiler title="ex_super_input演示页面" />
      <h3 class="bold">介绍</h3>
      用于快速变化输入方式组件，作为高阶表单基础
      可应用所有el-input组件属性，不适用插槽
      <div class="flex_row_center">
        继承el-input所有事件与属性
        <el-link class="mg_l2" href="https://element.eleme.cn/#/zh-CN/component/input" type="primary"
          target="_blank">相关链接</el-link>
      </div>
      <h3 class="bold">使用示例</h3>
      <div>
        <div>最简用法,普通输入框</div>
        <ex_super_input v-model="form.a" type="input" />
      </div>
      <div>
        <div>自动化选择组件，</div>
        <ex_super_input v-model="form.b" type="select" enum="OmsOutboundOrderStatusEnum" />
      </div>
      <div>
        <div>单选组，</div>
        <ex_super_input v-model="form.b" type="radio-group" enum="OmsOutboundOrderStatusEnum" />
      </div>
      <div>
        <div>多选组，</div>
        <ex_super_input v-model="form.c" type="checkbox-group" enum="OmsOutboundOrderStatusEnum" />
      </div>
      <div>
        <div>时间选择</div>
        <ex_super_input v-model="form.d" type="date-picker"  />
      </div>
      <div>
        <div>数字选择</div>
        <ex_super_input v-model="form.e" type="input-number"  />
      </div>
      <h3 class="bold">新增属性</h3>

      <el-table :data="com_attrs" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
        </el-table-column>
        <el-table-column prop="enum" label="可选值" width="180">
        </el-table-column>
        <el-table-column prop="default" label="默认值" width="180">
        </el-table-column>
      </el-table>
      <h3 class="bold">新增事件</h3>
      <el-table :data="com_event" style="width: 100%">
        <el-table-column prop="name" label="事件名" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="params" label="类型" width="200">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>



export default {
  title: "ex_super_input组件",
  data() {
    return {
      form: {},
      com_attrs: [
        { name: "type", remark: "可使用的组件类型", type: "string",enum:"text,input,select,radio-group,checkbox-group,time-select,time-picker,date-picker,input-number," },
        { name: "attrs", remark: "可带入组件类型匹配的属性", type: "object", },
       
       
        { name: "on", remark: "与组件类型匹配的事件传递", type: "object", },

      ],
      com_event: [
        { name: "——", remark: "与组件类型匹配的事件传递", params: "" },


      ],
    };
  },

};
</script>
<style  scoped></style>
